<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<style>
    .form-control {
        margin: 10px;
    }

    #regBox {
        width: 370px;
        height: 470px;
        border: 1px solid #E2E3E5;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -185px;
        margin-top: -200px;
        border-radius: 10px;
        color: #f5f5f5;
    }

    #logo {
        width: 370px;
        height: 95px;
        font-size: 30px;
        color: #676A6C;
        line-height: 95px;
        margin-left: 40px;
    }


    .form-control.input {
        width: 295px;
        height: 50px;
        margin-left: 40px;
    }

    .form-control.sel {
        width: 195px;
        height: 50px;
        margin-left: 40px;
        display: inline;
    }

    .myAvatar {
        width: 50px;
        height: 50px;
        float: right;
        margin-right: 40px;
        margin-top: 10px;
    }

    #btn-reg {
        width: 295px;
        height: 50px;
        margin-left: 40px;
        margin-top: 20px;
    }


    .toRegister {
        font-size: 12px;
        color: #676A6C;
        float: contour;
    }

    #remember {
        /*width: 80px;*/
        height: 20px;
        margin-left: 50px;
        margin-top: 20px;
        color: #676A6C;
        font-size: 15px;
        clear: both;
    }


</style>

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.css">

    <script src="static/js/jquery.js"></script>
    <script src="static/bootstrap/js/bootstrap.js"></script>
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
</head>

<body>

<div id="regBox">

    <div id="logo">
        用户注册
    </div>

    <form class="needs-validation" action="/RegisterServlet" method="post" name="form1"
          onsubmit="return check()">

        <div id="info">
            <input type="text" class="form-control input" id="user" name="uName" placeholder="账号" required>
            <input type="password" class="form-control input" id="pwd" name="uPwd" placeholder="密码" required>
            <input type="password" class="form-control input" id="VerPwd" name="uPwd2" placeholder="确认密码" required>
            <input type="text" class="form-control input" id="UMail" name="uMail" placeholder="邮箱" required>
            <div id="remember">
<%--                两周内自动登录 <input type="checkbox" name="autoLogin">--%>
                <span class="toRegister">已有帐号？<a href="./login.jsp" id="toRegister">去登录</a></span>
            </div>
            <%--            <input type="file" class=" form-control input" id="img" name="imgName"  placeholder="上传头像" required>--%>

            <button class="btn btn-primary " id="btn-reg">注册</button>
        </div>
    </form>
</div>


<script>
    toastr.options = { // toastr配置
        "closeButton": true, //是否显示关闭按钮
        "debug": false, //是否使用debug模式
        "progressBar": false, //是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失
        "positionClass": "toast-top-center",//显示的动画时间
        "showDuration": "400", //显示的动画时间
        "hideDuration": "1000", //消失的动画时间
        "timeOut": "1000", //展现时间
        "extendedTimeOut": "1000", //加长展示时间
        "showEasing": "swing", //显示时的动画缓冲方式
        "hideEasing": "linear", //消失时的动画缓冲方式
        "showMethod": "fadeIn", //显示时的动画方式
        "hideMethod": "fadeOut" //消失时的动画方式
    }
    const mySelect = document.getElementById("sel")
    const img = document.getElementById("myImg")
    mySelect.onchange = function () {
        img.src = 'static/images/' + this.options[this.selectedIndex].value + ".png"
    }

    function check() {
        if (form1.uName.value == "") {
            // alert("请输入用户名!!!");
            toastr.warning("请输入用户名!!!")
            form1.uName.focus();
            return false;
        }
        if (form1.uPwd.value == "") {
            // alert("请输入密码!!!");
            toastr.warning("请输入密码!!!")
            form1.uPwd.focus();
            return false;
        }

        var mail = document.getElementById("UMail");
        //对电子邮件的验证
        var MailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!MailReg.test(mail.value)) {
            // alert('请输入正确的邮箱格式！');
            toastr.warning("请输入正确的邮箱格式！")
            mail.focus();
            return false;
        }

        if (form1.UMail.value == "") {
            // alert("请输入电子邮箱!!!");
            toastr.warning("请输入电子邮箱!!!")
            form1.UMail.focus();
            return false;
        }
        if (form1.uPwd.value != form1.uPwd2.value) {
            // alert("两次密码不一致，请重新输入!");
            toastr.warning("两次密码不一致，请重新输入!")
            form1.uPwd2.focus();
            return false;
        }
    }

</script>

</body>


</html>
